<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模态框</title>
    <style>
        #modal {
            height: 200px;
            width: 200px;
            line-height: 200px;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <button id="open">打开弹框</button>
    <button id="close">关闭弹框</button>
    <script>
        // Modal类 可以实例化很多次  有些只实例化一次，叫单例模式
        // 推迟 Modal 实例化的时间 到第一次显示
        // 立即执行函数
        // 构建Modal类
            // 1. 立即执行函数 + 返回函数
                    // 函数嵌套函数 闭包
            // 2. return在开始是有的 如果在构造函数中手动指定return  new 的高级用法
            // 满足单例
        const Modal = (function() {
            // console.log('立即执行函数')
            let modal = null; // 模态框 永生
            return function() {
                // modal 哪来的？
                // 函数里找变量 作用域链的概念 自身没有，会沿着作用域链向上查找
                if (!modal) { // 空 第一次 new null？
                    modal = document.createElement('div');
                    modal.id = 'modal';
                    modal.style.display = 'none';
                    modal.innerText = '我是全局唯一的模态框';
                    document.body.appendChild(modal);
                }
                return modal;
            }
        })();
        // const Modal = function() {
        //     // dom -> body
        //     this.modalBox = document.createElement('div');
        //     this.modalBox.id = 'modal';
        //     this.modalBox.style.display = 'none';
        //     this.modalBox.innerText = '我是全局唯一的模态框';
        //     document.body.appendChild(this.modalBox);
        // }
        // let modal = new Modal(); // 直接实例化 Modal

        // 点不点按钮 触发登录相关权限与否，modal框是不是已经挂载到页面上了
        // modal框不是要提前存在的
        // modal 第一次 生产 + 显示
        // let modal = document.createElement('div');
        // modal.id = 'modal';
        // modal.style.display = 'none';
        // modal.innerText = '我是全局唯一的模态框';
        // document.body.appendChild(modal);

        // let modal = null;
        // open 和 close 都会去做实例化
        // 单例模式的概念是无论实例化多少次，返回的都是原来的唯一实例
        const openButton = document.getElementById('open'),
              closeButton = document.getElementById('close');
        openButton.addEventListener('click', function() {
            // 弹出框显示出来
            // modal 没有的话 new一次
            // 推迟实例化时间
            let modal = new Modal();
            modal.style.display = 'block';
        });
        closeButton.addEventListener('click', function() {
            // 已经显示的弹出框隐藏起来
            let modal = new Modal();
            modal.style.display = 'none';
        });
    </script>
</body>
</html>